<template>
  <div
    class="common-search-wrap"
    :style="{ '--theme-color': systemInfo.theme }"
  >
    <div
      :class="[
        'common-search-animation',
        otherSearch ? 'common-search-layout-short' : 'common-search-layout',
        isOpen ? 'expansion' : !isMore ? 'no-hidden' : 'put'
      ]"
    >
      <div class="form" ref="form">
        <slot name="default"></slot>
      </div>
    </div>
    <div class="tool">
      <div
        class="more"
        v-if="isMore"
        @click="more"
        :style="{ color: this.systemInfo.theme }"
      >
        <i :class="['iconfont icon-zhankai', isOpen ? 'up' : 'down']"></i>
        <span>
          {{ isOpen ? "收起" : "展开" }}
        </span>
      </div>
      <div class="tool-box">
        <el-button
          slot="tools"
          type="primary"
          icon="el-icon-search"
          @click="search"
          v-if="showReset"
          >{{ searchContent }}
        </el-button>
        <el-button
          slot="tools"
          icon="el-icon-refresh"
          @click="reset"
          v-if="showReset"
          >重置
        </el-button>
      </div>
      <div v-if="otherSearch" class="other-search">
        <slot name="customSearch"></slot>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { DebounceBy } from "@/utils/once";

export default {
  name: "CommonSearch",
  props: {
    otherSearch: {
      type: Boolean,
      default: false
    },
    searchContent: {
      type: String,
      default: "查询"
    },
    showReset: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isMore: true,
      isOpen: false,
      container: null
    };
  },
  computed: {
    ...mapGetters(["windowResize", "systemInfo"]),
    setTheme() {
      return this.systemInfo.theme;
    }
  },
  watch: {
    windowResize: function() {
      console.log("窗口变化");
      this.resize();
    }
  },
  methods: {
    search: DebounceBy(function(e) {
      this.$emit("search", e);
    }, 1000),

    reset(e) {
      this.$emit("reset", e);
    },
    more() {
      this.isOpen = !this.isOpen;
    },
    resize() {
      if (this.container && this.container.children.length) {
        let form = this.container.children[0];

        let minWidth = 0;

        if (form.children.length) {
          let children = form.children[0];

          minWidth = children.getBoundingClientRect().width;
        }
        let { height } = form.getBoundingClientRect();

        this.isMore = Math.floor(height) > 51;
      } else {
        this.isMore = false;
      }
    },
    initMore() {
      this.container = this.$refs.form;
      this.resize();
    }
  },
  mounted() {
    this.initMore();
  }
};
</script>

<style scoped lang="scss">
.common-search-wrap {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .common-search-animation {
    transition: all 0.25s linear;
  }

  .common-search-layout {
    width: calc(100% - 174px);
    display: flex;
  }

  .common-search-layout-short {
    width: calc(100% - 390px);
    display: flex;
  }

  .form {
    width: calc(100% - 80px);
  }

  .more {
    width: 80px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none;

    font-size: 14px;
    color: #409eff;

    .icon-zhankai {
      font-size: 12px;
    }

    .up {
      transform: rotate(180deg);
    }

    .down {
    }

    span {
      margin-left: 4px;
    }
  }

  .tool {
    display: flex;

    .tool-box {
      width: 174px;
      height: 34px;
      ::v-deep .el-button--primary {
        background-color: var(--theme-color);
        border-color: var(--theme-color);
      }
    }

    .other-search {
      padding: 0 18px 0 0;
      position: relative;
      right: 0;
      display: flex;
      width: 205px;
      align-items: center;
      height: 34px;
    }
  }

  // 展开
  .expansion {
    // max-height: 204px;
  }

  // 收起
  .put {
    max-height: 51px;
    overflow: hidden;
  }

  .no-hidden {
    max-height: 51px;
  }
}
</style>
